import { createRouter, createWebHashHistory } from 'vue-router'

//  公共布局组件
import Layout from '@/views/Layout'
// 首页（公共布局下的第一个子路由）
import Home from '@/views/Home'
// 一级分类页(动态路由)
import Category from '@/views/Category'
// 二级分类页()
import CategorySub from '@/views/Category/sub.vue'
// 导入面包屑导航
import Goods from '@/views/Goods'
// 导入登录页面
const Login = () => import('@/views/Login')
// 导入
const Test = () => import('@/views/Test')
// 导入qq登录路由
const LoginCallBack = () => import('@/views/Login/callback')
// 导入购物车
const Cart = () => import('@/views/Cart')
// 导入下单结算页面
const Settlement = () => import('@/views/Member/settlement')

// 路由的数组
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 首页
      {
        path: '/',
        component: Home
      },
      // 一级分类页(动态路由)
      {
        path: 'category/:id',
        component: Category
      },
      // 二级分类
      {
        path: 'category/sub/:id',
        component: CategorySub
      },
      // 面包屑详情
      {
        path: 'goods/:id',
        component: Goods
      },
      // 购物车
      {
        path: '/cart',
        component: Cart
      },
      // 下单结算
      {
        path: '/settlement',
        component: Settlement
      }
    ]
  },
  // 登录
  {
    path: '/login',
    component: Login
  },
  // qq登录
  {
    path: '/login/callback',
    component: LoginCallBack
  },

  // 测试
  {
    path: '/test',
    component: Test
  }

]

// vue3创建路由router实例，使用createRouter()
const router = createRouter({
  // createWebHashHistory() hash模式（兼容性好） | createWebHistory() history模式路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})

export default router
